<template>
	<view class="index">
		<u-tabbar :value="value" @change="name => value = name" :fixed="false" :placeholder="false"
			:safeAreaInsetBottom="false">
			<u-tabbar-item text="主机" icon="grid" @click="showTop" name="主机"></u-tabbar-item>
			<u-tabbar-item text="尾轴" icon="lock" @click="showMiddle" name="尾轴"></u-tabbar-item>
			<u-tabbar-item text="主体" icon="info-circle" @click="showBottom" name="主体"></u-tabbar-item>
		</u-tabbar>

		<view class="top" v-if="currentView == 'top'">
			<!-- <view style="width: 35%;">
				<view class="part">
					<view class="name">雷达</view>
					<image class="img" src="../../static/ld.png"></image>
				</view>
				<view class="part">
					<view class="name">发电机配电板</view>
					<image class="img" src="../../static/fdj.png"></image>
				</view> --> 
			<view style="width: 100%;height:40%">
				<view style="height: 100%;width:100%;margin-top:40px">
					<gauge :value="Number(allData?.left_main?.z101.currentValue)" :min="0" :max="1000"
						style="height: 100%; width: 100%;" text="左主机转速表">
					</gauge>
					<gauge :value="Number(allData?.right_main?.z201.currentValue)" :min="0" :max="1000"
						style="height: 100%; width: 100%;" text="右主机转速表">
					</gauge>
				</view>
			</view>
		</view>

		<view class="middle" v-if="currentView == 'middle'">
			<view style="width: 100%;height:40%">
				<view style="height: 100%;width:100%;margin-top:40px">
					<gauge :value="Number(HEXtoDEC(allData?.left_main?.z102.currentValue))" :min="-300" :max="300"
						text="左尾轴转速表" style="height: 100%; width: 100%;">
					</gauge>
					<gauge :value="Number(HEXtoDEC(allData?.right_main?.z202.currentValue))" :min="-300" :max="300"
						style="height: 100%; width: 100%;" text="右尾轴转速表"></gauge>
				</view>
			</view>
			<!-- 		<view style="width: 100%;height:40%">
				<view
					style="display: flex; flex-direction: row; justify-content: center;gap: 20rpx;height: 90%;width:100%;">
					<gauge :value="Number(allData?.right_main?.z201.currentValue)" :min="0" :max="1000"
						style="height: 100%; width: 100%;" text="主机转速表">
					</gauge>
					<gauge :value="Number(HEXtoDEC(allData?.right_main?.z202.currentValue))" :min="-300" :max="300"
						style="height: 100%; width: 100%;" text="尾轴转速表"></gauge>
				</view>
			</view> -->
		</view>

		<view class="bottom"  v-if="currentView == 'bottom'">
			  <view class="leftwrap" @click="routerPush(`/pages/equipment/main?props=${0}&id=${0}`)">
				<view
					style="position: absolute;top: 9.5%;left: 33.8%; height: 28.5%; display: flex;flex-direction: column;justify-content: space-evenly;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.left_main?.z129?.state,
						allData?.left_main?.z130?.state,
						allData?.left_main?.z134?.state,
						allData?.left_main?.z118?.state 
						]" :key="idx" :judg-ment="true" :color-id="item"></mypoint>

				</view>
				<view
					style="position: absolute;top: 10.5%;left: 52.5%; height: 27%;display: flex;flex-direction: column;justify-content: space-between;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.left_main?.z149?.state,
						allData?.left_main?.z150?.state,
						allData?.left_main?.z151?.state,
						allData?.left_main?.z152?.state,
						allData?.left_main?.z153?.state,
						allData?.left_main?.z154?.state
						]" :key="idx" :judg-ment="true" :color-id="item"></mypoint>
				</view>
				<view
					style="position: absolute;top: 8.7%;left: 73.3%; height: 29.5%;display: flex;flex-direction: column;justify-content: space-between;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.left_main?.z141?.state,
						allData?.left_main?.z142?.state,
						allData?.left_main?.z143?.state,
						allData?.left_main?.z144?.state,
						allData?.left_main?.z145?.state,
						allData?.left_main?.z146?.state,
						allData?.left_main?.z147?.state
						]" :key="idx" :judg-ment="true" :color-id="item"></mypoint>
				</view>
				<view
					style="position: absolute;top: 59.5%;left: 44%;width: 27%;height: 7%;display: flex;justify-content: center;align-items: center;">
					<lightrectangle :customStyle="{ width: '100%', height: '100%' }"
						:customStyler="{ width: '80%', height: '80%',background:colors[runMainLight]}"
						:customStylerr="{ background:colors[runMainLight] }" :show="runMainLight"></lightrectangle>
				</view>
			</view>
			
		
			<view class="rightwrap" @click="routerPush(`/pages/equipment/main?props=${1}&id=${1}`)">
				<view
					style="position: absolute;top: 9.5%;left: 33.8%; height: 28.5%; display: flex;flex-direction: column;justify-content: space-evenly;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.right_main?.z229?.state,
						allData?.right_main?.z230?.state,
						allData?.right_main?.z234?.state,
						allData?.right_main?.z221?.state
						]" :key="idx" :judg-ment="true" :color-id="item"></mypoint>
				</view>
				<view
					style="position: absolute;top: 10.5%;left: 52.5%; height: 27%;display: flex;flex-direction: column;justify-content: space-between;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.right_main?.z249?.state,
						allData?.right_main?.z250?.state,
						allData?.right_main?.z251?.state,
						allData?.right_main?.z252?.state,
						allData?.right_main?.z253?.state,
						allData?.right_main?.z254?.state
						]"></mypoint>
				</view>
				<view
					style="position: absolute;top: 8.7%;left: 73.3%; height: 29.5%;display: flex;flex-direction: column;justify-content: space-between;">
					<mypoint width="12px" height="12px" v-for="(item, idx) in [
						allData?.right_main?.z241?.state,
						allData?.right_main?.z242?.state,
						allData?.right_main?.z243?.state,
						allData?.right_main?.z244?.state,
						allData?.right_main?.z245?.state,
						allData?.right_main?.z246?.state,
						allData?.right_main?.z247?.state
						]" :key="idx" :judg-ment="true" :color-id="item"></mypoint>
				</view>
				<view
					style="position: absolute;top: 59.5%;left: 44%;width: 27%;height: 7%;display: flex;justify-content: center;align-items: center;">
					<lightrectangle :customStyle="{ width: '100%', height: '100%' }"
						:customStyler="{ width: '80%', height: '80%',background:colors[runMainLight]}"
						:customStylerr="{ background:colors[runMainLight] }" :show="runMainLight"></lightrectangle>
				
			</view>
		</view>

</view>
</view>
</template>

<script setup>
	import gauge from '@/components/echats/gauge.vue';
	import mypoint from '@/components/mypoint.vue';
	import lightrectangle from '@/components/lightrectangle.vue';
	import { routerPush } from "@/plugins/index.js";
	import {
		color as colors
	} from '@/mixins/globalParam.js'
	import {
		HEXtoDECSymbols
	} from '@/utils/utils.js'
	import {
		ref,
		inject,
		computed
	} from 'vue';
	let allData = inject('allData')
	const HEXtoDEC = computed(() => {
		return (hexValue) => {
			return HEXtoDECSymbols(hexValue)
		}
	})
	// 定义响应式变量来跟踪当前显示的视图
	const currentView = ref('top');
	const value = ref('主机');
	// 定义点击事件处理函数
	const showTop = () => {
		currentView.value = 'top';
	};

	const showMiddle = () => {
		currentView.value = 'middle';
	};

	const showBottom = () => {
		currentView.value = 'bottom';
	};

	const runMainLight = computed(() => {
		return (
			hostRunningStatusMethod(
				1,
				allData.value?.right_main?.z231?.currentValue,
				allData.value?.right_main?.z232?.currentValue
			) ||
			hostRunningStatusMethod(
				0,
				allData.value?.right_main?.z231?.currentValue,
				allData.value?.right_main?.z232?.currentValue
			)
		)
	})

	const hostRunningStatusMethod = (str, zc, dc) => {
		let mypoint = 10
		let zcValue = zc ?? 0
		let dcValue = dc ?? 0
		if (zcValue < mypoint && zcValue < mypoint) return 0
		if (!str) {
			// 倒车
			if (dcValue >= mypoint) return 2
			else return 0
		} else {
			if (zcValue >= mypoint) return 3
			else return 0
			// 正车
		}
	}

</script>

<style scoped lang="scss">
	.index {
		background-color: rgb(45, 73, 97);
		color: rgb(64, 158, 255);
		//padding: 10rpx 10rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}
		.top {

			// display: flex;
			// justify-content: center;
			height: 100%;

			.part {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				height: 40%;

				.name {
					font-size: 18px;
					margin-bottom: 10rpx;
				}

				.img {
					width: 90rpx;
					height: 80rpx;
				}
			}
		}


		.middle {
			// display: flex;
			// justify-content: center;
			height: 100%;

		}

			
		.bottom {
			//flex: 1;
			display: flex;
			justify-content: center;
			height: 100%;
			.leftwrap {
				position: relative;
				top:10%;
				width: 135px;
				height: 70%;
				background: url('@/static/hostEngine.png') no-repeat;
				background-size: 100% 100%;
				background-position: top center;
			}

			.rightwrap {
				top:10%;
				position: relative;
				width: 135px;
				height: 70%;
				background: url('@/static/hostEngine.png') no-repeat;
				background-size: 100% 100%;
				background-position: top center;
			}


		
	}

	.btn {
		display: flex;
		margin-top: 20rpx;

		&>* {
			margin: 0 40rpx;

		}
	}
</style>